<template>
  <div class="billListWrap">
    <van-empty v-if="list.length === 0" description="暂无数据" />
    <section v-else>
      <header>
        <div class="balanceBox">
          <div class="income">
            <span>收入</span>
            <span>{{getMoney(props.balance.income)}}</span>
          </div>
          <div class="expenses">
            <span>支出</span>
            <span>{{getMoney(props.balance.expenses)}}</span>
          </div>
          <div class="balance">
            <span>净收入</span>
            <span>{{getMoney(props.balance.balance)}}</span>
          </div>
        </div>
      </header>
      <main>
        <ul>
          <li v-for="(item,iIndex) in list" :key="item.id">
            <van-swipe-cell>
              <div class="icon">
                {{item.tag.sign}}
              </div>
              <div class="detail">
                <div class="message">
                  <span>{{item.tag.name}}</span>
                  <span class="sub">{{convertDate(item.happen_at)}}</span>
                </div>
                <div class="amount">
                  ¥<span>{{ getMoney(item.amount) }}</span>
                </div>
              </div>
              <template #right>
                <van-button square text="删除" @click="handleDeleteItem(item.id,iIndex)" type="danger" class="delete-button" />
              </template>
            </van-swipe-cell>
          </li>
          <li class="bottomFuncRow">
            <span v-if="hasMore" v-scroll-load="getMoreData">显示更多</span>
            <!-- <span v-else>没有更多</span> -->
          </li>
        </ul>
      </main>
    </section>
  </div>
</template>
<script lang="ts" setup name="BillList">
import {PropType,computed} from 'vue'
import { ItemStore } from '@/store/useItemStore'
import dayjs from 'dayjs'
import vScrollLoad from '@/directives/scrollLoad'
import { getMoney } from '@/utils/money'
const props = defineProps({
  storeDate: {
    type: Object as PropType<ItemStore>,
      required: true
  },
  balance: {
    type: Object,
    default: {}
  },
  dateParam: {
    type: Object as PropType<ItemListDateParam>,
    default: {}
  }
})
const list = computed(() => props.storeDate.items)
const hasMore = computed(() => props.storeDate.hasMore)
const convertDate = (date: string) => {
  return dayjs(date).format('YYYY-MM-DD');
}
const getMoreData = () => {
  props.storeDate.fetchMore(props.dateParam.happened_after, props.dateParam.happened_before)
}
const onError=()=>{
  showDialog({
    title: '错误',
    message: '删除失败',
    width: '320px'
  })
}
const handleDeleteItem = async(id:number,index:number) => {
  await showConfirmDialog({
    title: '删除账目',
    message: '删除账目，请确认？',
    confirmButtonColor: '#f00',
    overlay: true
  })
  await http.delete<Resource<Tag>>(
    `/item/${id}`)
    .then(res=>{
      props.storeDate.items.splice(index,1)
      showSuccessToast({message:res.msg,iconSize:'28px'})
    })
    .catch(onError)
}
</script>
<style scoped lang="scss">
.billListWrap{
  height: 100%;
  section{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 0;
    header{
      margin: 16px;
      .balanceBox{
        display: flex;
        justify-content: space-around;
        background: #2C3333;
        border-radius: 8px;
        >div{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 16px;
        }
        .income{
          color: #07c160;
        }
        .expenses{
          color: #ee0a24;
        }
        .balance{
          color: #fff;
        }
      }
    }
    main{
      flex: 1;
      height: 100px;
      ul{
        height: 100%;
        overflow-y: auto;
        padding-bottom: 16px;
        li{
          :deep(.van-swipe-cell){
            width: 100%;
            .van-swipe-cell__wrapper{
              display: flex;
              padding: 12px 16px;
              column-gap: 6px;
            }
            .van-swipe-cell__right{
              .van-button{
                height: 100%;
              }
            }
          }
          &+li{
            border-top: 1px solid var(--list-border-color);
          }
          .icon{
            @include tag;
          }
          .detail{
            flex: 1;
            width: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 4px;
            .message{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 100%;
              .sub{
                color:var(--list-sub-text-color)
              }
              span{
                font-size: 16px;
              }
            }
            .amount{
              color: var(--amount-text-color);
            }
          }
        }
      }
    }
  }
  
}
</style>
